<template>
  <n-button
    @click="chooseFileFunc"
    v-show="modelValue.toEdit"
    >选择文件</n-button
  >
  <!--  {{modelValue}}{{fullPathList}}-->
  <div
    id="image-scroll-container"
    style="overflow: auto; height: 120px; display: flex; flex-direction: row; gap: 8px"
  >
    <!--    lazy-->
    <n-image
      v-for="(src, index) in fullPathList"
      :key="index"
      width="100"
      height="100"
      :src="src"
      :intersection-observer-options="{
        root: '#image-scroll-container',
      }"
      @contextmenu.prevent="onContextmenu($event, src)"
    >
      <template #placeholder>
        <div
          style="
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0001;
          "
        >
          Loading
        </div>
      </template>
    </n-image>
  </div>
  <n-dropdown
    :disabled="!modelValue.toEdit"
    placement="bottom-start"
    trigger="manual"
    :x="xRef"
    :y="yRef"
    :options="options"
    :show="showDropdownRef"
    :on-clickoutside="onClickoutside"
    @select="handleSelect"
  />
</template>
<script
  lang="ts"
  setup
  generic="T extends object &
{ toRemovePicList:  Array<string>,picList:Array<string>,toEdit:boolean}"
>
import UseSetting from "@pinias/UseSetting";
import * as PathUtils from "@utils/pathUtils";
import { picPath } from "@utils/pathUtils";
import { NButton } from "naive-ui";
import { computed, h, onMounted, ref, watch } from "vue";

const { chooseFile, getFileFullPath, getFileBasePath, chooseDir, save2Local } = UseSetting();
const props = defineProps<{ modelValue: T }>();
const emit = defineEmits(["update:modelValue"]);
const modelValue = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val),
});
const fullPathList = ref(new Array<string>());
// 选择文件
const chooseFileFunc = async () => {
  // console.log("path");
  const path = await chooseFile(PathUtils.picPath);
  // console.log(path);
  if (path.length > 0) {
    modelValue.value.picList.push(...(await getFileBasePath([...path])));
    fullPathList.value.push(...path);
    // setSort();
  }
  // console.log(modelValue.value);
};
// 删除文件
const deleteFile = (file: string, fullPathList: Array<string>, basePathList: Array<string>) => {
  if (modelValue.value.toEdit) {
    let index = -1;
    const string = fullPathList.find((value, index1) => {
      if (value === file) {
        index = index1;
        return true;
      }
    });
    if (index !== -1 && string !== undefined) {
      modelValue.value.toRemovePicList.push(string);
      fullPathList.splice(index, 1);
      basePathList.splice(index, 1);
    }
  }
};
// 右键菜单
// const message = useMessage();
const options = [
  {
    label: "下载",
    key: "save",
  },
  {
    label: () => h("span", { style: { color: "red" } }, "删除"),
    key: "delete",
  },
];
const showDropdownRef = ref(false);
const xRef = ref(0);
const yRef = ref(0);
const onClickoutside = () => {
  showDropdownRef.value = false;
};
let file = ref("");
const handleSelect = async (key: string, node: string) => {
  console.log(key, node);
  showDropdownRef.value = false;
  if (key == "save") {
    // editSettings.toEdit = true;
    const path = await chooseDir("");
    if (path.length > 0) {
      // console.log(path,"++++++++++++++=")
      save2Local(file.value, path);
    }
  }
  if (key == "delete") {
    deleteFile(file.value, fullPathList.value, modelValue.value.picList);
  }
};
const onContextmenu = (e: MouseEvent, src: string) => {
  // message.info(JSON.stringify(row, null, 2));
  showDropdownRef.value = true;
  xRef.value = e.clientX;
  yRef.value = e.clientY;
  // console.log('rowProps',row)
  file.value = src;
};
// 拖拽逻辑
// function setSort() {
//   const str = "#image-scroll-container n-image";
//   const el = document.querySelector(str);
//   new Sortable(el, {
//     sort: true,
//     ghostClass: "sortable-ghost",
//     direction: "horizontal",
//     onEnd: (e: any) => {
//       const targetRow = fullPathList.value.splice(e.oldIndex, 1)[0];
//       fullPathList.value.splice(e.newIndex, 0, targetRow);
//       const targetRow2 = modelValue.value.picList.splice(e.oldIndex, 1)[0];
//       modelValue.value.picList.splice(e.newIndex, 0, targetRow2);
//       console.log(modelValue.value.picList);
//     },
//   });
// }
const getFullPath = async () => {
  if (modelValue.value.picList.length > 0)
    fullPathList.value = await getFileFullPath([...modelValue.value.picList], picPath);
  else fullPathList.value = new Array<string>();
  // console.log(modelValue.value.picList,fullPathList,"+++++++++++++++++++++++")
  // setSort();
};
watch(modelValue.value, getFullPath);
onMounted(getFullPath);
</script>
